<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">

</div>
</div>

<div class="table_div1">
  <div id="searchParam">
    <div class="layui-form-item">
      <!-- <div class="layui-input-inline">
        <input type="text" id="stationNameInput" class="layui-input"  autocomplete="off" placeholder="请输入油站名称">
      </div> -->
	  <div class="layui-input-inline layui-form">
      	<select id="analyseratioInput">
      		<option value = "0">月销环比</option>
      		<option value = "1">月销同比</option>
		</select>
      </div>
	  
	  <div class="layui-input-inline">
        <input type="text" id="yearMonthInput" class="layui-input"  autocomplete="off" placeholder="请输入年月">
      </div>
      
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search1()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable1" lay-filter="showTable1" ></table>
</div>


<div class="table_div2" hidden>
  <div id="searchParam"  >
    <div class="layui-form-item">
      <div class="layui-input-inline ">
        <button class="layui-btn" id="btn_cancel">返回</button>
      </div>
    </div>
  </div>
  <table class="layui-table" id="showTable2" lay-filter="showTable2" ></table>
</div>



<script type="text/html" id="toolbar1">
</script>

<script type="text/html" id="toolbar2">
</script>
<script type="text/html" id="tool1">
  <a class="layui-btn layui-btn-xs" lay-event="view">查看加油站</a>
</script>
<script type="text/html" id="tool2">
</script>


</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var $ = jQuery = layui.jquery;
  //初始当前 年月
  var currentDate = new Date();
  var currentYear = currentDate.getFullYear();
  var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
  var yearMonthInput;
  if(10 > currentMonth > 0){
	  yearMonthInput = currentYear + "0" + currentMonth;
	  $("#yearMonthInput").val(currentYear + "0" + currentMonth);
  }else{
	  yearMonthInput = currentYear + "" + currentMonth;
	  $("#yearMonthInput").val(currentYear + "" + currentMonth);
  }
  
  var tableIns1;
  var tableIns2;
  
  var tableIns1Url1 = "/gas/analyse/ratioring/list1";
  var tableIns1Url2 = "/gas/analyse/ratiowith/list1";
  
  var tableIns2Url1 = "/gas/analyse/ratioring/list2";
  var tableIns2Url2 = "/gas/analyse/ratiowith/list2";
  
  var tableIns1Cols1 = [
               [
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '单位代码', sort: true, hide: true},
                {field: 'name', title: '单位名称', sort: true},
                {field: 'averageSaleAmount', title: '加油笔数', sort: true},
                {field: 'averageUpSaleAsAmount', title: '环比笔数', sort: true},
                {field: 'ratioRingSaleAmount', title: '环比', sort: true},
                
                {field: 'averageSale', title: '加油金额(万元)', sort: true, templet: function(d) {
     				return (d.averageSale / 10000).toFixed(2);
                }},
                
                {field: 'averageUpSale', title: '环比金额(万元)', sort: true, templet: function(d) {
     				return (d.averageUpSale / 10000).toFixed(2);
                }},
                
                {field: 'ratioRingSale', title: '环比', sort: true},
                
                {field: 'yearMonths', title: '年月', sort: true},
                {width: 120, toolbar: "#tool1", title: '操作'}
                
              ]
            ];
  
  var tableIns1Cols2 = [
               [
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '单位代码', sort: true, hide: true},
                {field: 'name', title: '单位名称', sort: true},
                {field: 'averageSaleAmount', title: '加油笔数', sort: true},
                {field: 'averageUpSaleAsAmount', title: '同比笔数', sort: true},
                {field: 'ratioRingSaleAmount', title: '同比', sort: true},
                
                {field: 'averageSale', title: '加油金额(万元)', sort: true, templet: function(d) {
     				return (d.averageSale / 10000).toFixed(2);
                }},
                
                {field: 'averageUpSale', title: '同比金额(万元)', sort: true, templet: function(d) {
     				return (d.averageUpSale / 10000).toFixed(2);
                }},
                
                {field: 'ratioRingSale', title: '同比', sort: true},
                
                {field: 'yearMonths', title: '年月', sort: true},
                {width: 120, toolbar: "#tool1", title: '操作'}
                
              ]
            ];
  
  
  var tableIns2Cols1 = [
                        [
                         {type: 'checkbox', fixed: 'left'},
                         {field: 'id', title: '主键ID', sort: true, hide: true},
                         {field: 'stationId', title: '主键ID', sort: true, hide: true},
                         {field: 'stationName', title: '加油站名称', sort: true},
                         {field: 'saleAmount', title: '加油笔数', sort: true},
                         {field: 'upSaleAmount', title: '环比笔数', sort: true},
                         {field: 'ratioRingAmount', title: '环比', sort: true},
                         
                         {field: 'sale', title: '加油金额(万元)', sort: true, templet: function(d) {
              				return (d.sale / 10000).toFixed(2);
                         }},
                         {field: 'upSale', title: '环比金额(万元)', sort: true, templet: function(d) {
              				return (d.upSale / 10000).toFixed(2);
                         }},
                         {field: 'ratioRing', title: '环比', sort: true},
                         
                         {field: 'yearMonths', title: '年月', sort: true},
                         {width: 120, toolbar: "#tool1", title: '操作'}
                         
                       ]
                     ];
           
  var tableIns2Cols2 = [
               [
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '主键ID', sort: true, hide: true},
                {field: 'stationId', title: '主键ID', sort: true, hide: true},
                {field: 'stationName', title: '加油站名称', sort: true},
                
                {field: 'saleAmount', title: '加油笔数', sort: true},
                {field: 'upSaleAmount', title: '同比笔数', sort: true},
                {field: 'ratioWithAmount', title: '同比', sort: true},
                
                {field: 'sale', title: '加油金额(万元)', sort: true, templet: function(d) {
     				return (d.sale / 10000).toFixed(2);
                }},
                
                {field: 'upSale', title: '同比金额(万元)', sort: true, templet: function(d) {
     				return (d.upSale / 10000).toFixed(2);
                }},
                
                {field: 'ratioWith', title: '同比', sort: true},
                
                {field: 'yearMonths', title: '年月', sort: true},
                {width: 120, toolbar: "#tool1", title: '操作'}
                
              ]
            ];
  
  
  
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;

  layui.use(['table', 'layer', 'laydate'], function () {
	  laydate.render({
		    elem: '#yearMonthInput',
		    type: 'month', // 设置类型为年选择
		    format: 'yyyyMM', // 设置年月格式
		    trigger: 'click', // 设置触发方式
		    /* ready: function(date){
		      // 控制器初始化时触发
		    },
		    change: function(value, date, endDate){
		      // 日期时间被切换时触发
		    } */
		  });    
    //加载table
    tableIns1 = table.render({
      elem: '#showTable1'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: tableIns1Url1 //数据接口
      , where: {yearMonths: yearMonthInput} // 初始化时的过滤条件

      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: tableIns1Cols1
      , toolbar: '#toolbar1'
    });
    //列操作
    table.on('tool(showTable1)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'view':
          search2(data.id);
          $(".table_div2").show();
          $(".table_div1").hide();
          break;
      }
    });
    
    tableIns2 = table.render({
        elem: '#showTable2'
        , contentType: 'application/json'
        , headers: {"authorization": token}
        , page: true //开启分页
        , url: tableIns2Url1 //数据接口
        , where: {yearMonths: yearMonthInput} // 初始化时的过滤条件

        , method: 'POST'
        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
            "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
          }
        }
        , cols: tableIns2Cols1
        , toolbar: '#toolbar2'
      });
    
    //导出
    $('#export').on('click', function () {
    	
    	var analyseratioCode = $("#analyseratioInput").val();
  	  	if(analyseratioCode == "0"){
  		  url = tableIns1Url1;
  		  cols = tableIns1Cols1;
  	  	}else if(analyseratioCode == "1"){
  		  url = tableIns1Url2;
  		  cols = tableIns1Cols2;
  	  	}
  	  
    	//原先分页limit
      	var exportParams = {
        	limit: -1,
  	  		yearMonths: $("#yearMonthInput").val()
      	};
      	CoreUtil.sendPost(url, exportParams, function (res) {
        	//初始化渲染数据
	        if (res.data != null && res.data.records != null) {
	            table.exportFile(tableIns1.config.id, res.data.records, 'xls');
	        }
      });
    });

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div1").show();
      $(".table_div2").hide();
      return false;
    });

  });

  //执行查询
  function search1() {
      var cols;
      var url;
	  var analyseratioCode = $("#analyseratioInput").val();
	  if(analyseratioCode == "0"){
		  url = tableIns1Url1;
		  cols = tableIns1Cols1;
	  }else if(analyseratioCode == "1"){
		  url = tableIns1Url2;
		  cols = tableIns1Cols2;
	  }
	  
	  //这里以搜索为例
      tableIns1.reload({
      	where: { //设定异步数据接口的额外参数，任意设
    	  yearMonths: $("#yearMonthInput").val()

      	}
      	, url: url
      	, cols: cols
      	, page: {
        	curr: 1 //重新从第 1 页开始
      	}
      });
  };
  
  function search2(taxorgcode) {
      var cols;
      var url;
	  var analyseratioCode = $("#analyseratioInput").val();
	  if(analyseratioCode == "0"){
		  url = tableIns2Url1;
		  cols = tableIns2Cols1;
	  }else if(analyseratioCode == "1"){
		  url = tableIns2Url2;
		  cols = tableIns2Cols2;
	  }
	  
	  //这里以搜索为例
      tableIns2.reload({
      	where: { // 设定异步数据接口的额外参数，任意设
    	  yearMonths: $("#yearMonthInput").val(),
    	  taxorgcode: taxorgcode
      	}
      	, url: url
      	, cols: cols
      	, page: {
        	curr: 1 // 重新从第 1 页开始
      	}
      });
	  
  }
  
  
  
  
</script>